<template>
    <div class="jiaowu">
        <div class="jiaowu_tit">
            <h1>教师添加&gt;</h1>
        </div>
        <div class="jiaowu_main">
              <div class="loginname">
                        <el-form
                        :model="form"
                        :rules="rules"
                        label-width="120px"
                        class="demo-ruleForm"
                        ref="myfrom"
                    >
                        <el-form-item label="账号" prop="account">
                        <el-input 
                        v-model="form.account" 
                        type="userword"
                        clearable
                        placeholder="请输入教师账号"
                            :prefix-icon="User"
                            />
                        </el-form-item>
                        <el-form-item label="名字" prop="name">
                        <el-input 
                        v-model="form.name" 
                        type="text"
                        clearable
                        placeholder="请输入姓名"
                            :prefix-icon="User"
                            />
                        </el-form-item>
                        
                         <el-form-item label="密码" prop="paw">
                            <el-input
                                v-model="form.paw"
                                type="password"
                                clearable
                                placeholder="请输入密码"
                                :prefix-icon="Lock"
                                show-password
                                @blur="checkdbpassword"
                            />
                            </el-form-item>
                        <el-form-item label="确认密码" prop="dbpassword">
                        <el-input
                            v-model="form.dbpassword"
                            type="password"
                            clearable
                            placeholder="请再次输入密码"
                            :prefix-icon="Lock"
                            show-password
                        
                        />
                        </el-form-item>
                        <el-form-item label="科目" prop="kemu">
                            <div class="radio">
                                    <el-radio-group 
                                    fill="#ff6700"
                                    @change="mustRedio"
                                    v-model="radio1" size="small">
                                    <el-radio-button  label="语文" />
                                    <el-radio-button label="数学" />
                                    <el-radio-button label="外语" />
                                    </el-radio-group>
                            </div>
                        </el-form-item>
                        <el-form-item label="所带班级" prop="classInfo">
                            <div class="selects">
                                  <el-select v-model="select1" @change="mustSelsct1" placeholder="请选择年级">
                                    <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                    />
                                </el-select>
                                <el-select v-model="select2" @change="mustSelsct2" placeholder="请选择班级">
                                    <el-option
                                    v-for="item in classes"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                    />
                                </el-select>
                            </div>
                        </el-form-item>
                       <el-form-item>
                            <div class="btnlogin">
                                <el-button block type="success" class="btn1" @click="submitFrom">添加</el-button>
                                <el-button block type="warning" class="btn1 btn2" @click="resetform">重置</el-button>
                            </div>
                        </el-form-item>
                    </el-form>
                </div>
        </div>
    </div>
</template>
<script>
import {reactive,toRefs,ref} from "vue"
import {Lock,User} from '@element-plus/icons-vue'
import {reg} from "@/utils/validate"
//消息提示
import { ElMessage } from 'element-plus'
//路由跳转
import {useRouter} from 'vue-router'
//ajax
import {ajax} from '@/api'
export default {
   setup(props) {
        const myfrom=ref()
        const radio1 = ref()
        const select1 = ref()
        const select2 = ref()
        const router= useRouter()
        //年级列表
        const options = [
                        {
                            value: '01',
                            label: '一年级',
                        },
                        {
                            value: '02',
                            label: '二年级',
                        },
                        {
                            value: '03',
                            label: '三年级',
                        },
                        {
                            value: '04',
                            label: '四年级',
                        },
                        {
                            value: '05',
                            label: '五年级',
                        },
                        {
                            value: '06',
                            label: '六年级',
                        },
                        ]
        //班级列表
        const classes=[
                        {
                            value: '01',
                            label: '(1)班',
                        },
                        {
                            value: '02',
                            label: '(2)班',
                        },
                        {
                            value: '03',
                            label: '(3)班',
                        },
                        {
                            value: '04',
                            label: '(4)班',
                        },
                        {
                            value: '05',
                            label: '(5)班',
                        },
                        {
                            value: '06',
                            label: '(6)班',
                        },
                        {
                            value: '07',
                            label: '(7)班',
                        },
                        {
                            value: '08',
                            label: '(8)班',
                        },
                        {
                            value: '09',
                            label: '(9)班',
                        },
        ]
          //重置操作
        const resetform=()=>{
            //resetFields   重置当前字段并删除验证结果。 
            myfrom.value.resetFields()
        }

        //判断两次密码不同
        const checkDbpass=(rule,value,callback)=>{
            if(state.form.paw!=value){
                callback(new Error("两次密码不一致"))
            }else{
            callback()
            }
        }
        const checkdbpassword=()=>{
            if(reg.pwd.test(state.form.paw)&&reg.pwd.test(state.form.dbpassword)){
            myfrom.value.validateField('dbpassword')
            }
        }

        //选中值
        const mustRedio=(value)=>{
            console.log(value);
            if(value=="语文"){
                state.form.kemu=99
            }else if(value=="数学"){
                state.form.kemu=79
            }else{
                state.form.kemu=97
            }
            
            state.a=true
        }
        //选中班级
        const mustSelsct1=(val1)=>{
            console.log(val1);
            state.val1=val1
            state.b=true
        }
        //选中班级
        const mustSelsct2=(val2)=>{
            console.log(val2);
            state.val2=val2
            state.c=true
            
        }

        //提交祖册  
        const submitFrom=()=>{
          //选这教研部之后才能提交表单信息
         if(state.a&&state.b&&state.c){
             state.form.classInfo=state.val1+state.val2
             myfrom.value.validate(async(valid)=>{
          if(valid){
                console.log(state.form);
                let res=await ajax.addJaoshi(state.form)
                if(res.code==200){
                    console.log("添加成功");
                }


          }else{
            ElMessage.error("请输入正确的注册信息")
          }
          
          })
         }else{
             ElMessage.error("请选择教师信息")
         }
        }
       const state=reactive({
        src:"https://gd-filems.dancf.com/saas/cms/0/a1b9aec9-593b-4e89-b2f0-361f85d755e823787.mp4",
        form:{
           kemu:null,
           classInfo:null
        },
        a:false,
        b:false,
        c:false,
        val1:null,
        val2:null,
        word:{},
        flag:false,
            User,
            Lock,
            rules:{
                account:[
                    {
                        required:true,message:'账号必填'
                    },
                     {
                        pattern:/^\d{8}$/,message:'账号8位数字'
                    },
                ],
                name:[
                     {
                        required:true,message:'名字必填'
                    },
                ],
                paw:[
                     {
                        required:true,message:'密码必填'
                    },
                    {
                        pattern:reg.pwd,message:'密码格式不正确'
                    }
                   
                ], dbpassword:[
                     {
                        required:true,message:'密码必填'
                    },
                    {
                        pattern:reg.pwd,message:'密码格式不正确'
                    },
                    {
                      validator:checkDbpass,trigger:"blur",message:'两次密码不一样'
                    }
                ],
            },
       })

       
       return{
           ...toRefs(state),
             myfrom,
             resetform,
             checkdbpassword,
             submitFrom,
             radio1,
             mustRedio,
             select1,
             options,
             select2,
             classes,
             mustSelsct1,
             mustSelsct2
             
       }
       
   }
}
</script> 
<style lang="scss" scoped>
.jiaowu{
    width: 100%;
    height: 100%;
    position: relative;
    .jiaowu_tit{
        h1{
            font-size: 20px;
            font-weight: bold;

        }
    }
    .jiaowu_main{
        position: absolute;
        padding: 10px;
        width: 400px;
        height: 400px;
        border: 1px solid black;
        left: 0;
        margin: auto;
        right: 0;
        bottom: 0;
        top: 0;
        border-radius: 10px;
        .loginname{
                .el-form-item__label{
                    color: #333;
                }
                .form_router{
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    a{
                        color: #ff6700;
                        font-size: 14px;
                        // text-decoration: none;
                    }
                }
        .btnlogin{
              width: 100%;
            .btn1{
                margin-bottom: 10px;
                width: 100%;
              }
              .btn2{
                margin-left: 0px;
              }
            }
            .radio{
                width: 100%;
                .el-radio-group {
                    display: flex;
                    padding: 0px 20px;
                    justify-content: space-between;
                 
                }
            }
            .selects{
                display: flex;
            }
            }

    }
   
}
</style>